<template>
    <div>
        <el-drawer
            title=""
            :visible.sync="dialogVisible"
            :size="1500"
            :wrapper-closable="false"
            :with-header="false"
        >
            <div class="drawer-box">
                <div class="handle-btn">
                    <i class="el-icon-close" title="关闭" @click="dialogVisible=false" />
                    <i v-if="Object.keys(detailFilter).length > 2" class="el-icon-arrow-up" title="切换上一个" @click="prev" />
                    <i v-if="Object.keys(detailFilter).length > 2" class="el-icon-arrow-down" title="切换下一个" @click="next" />
                </div>
                <div class="top-header">
                    <div class="title">
                        <div>
                            <span class="name">{{ info.name }}</span>
                            <span class="member">跟进人：<span>{{ info.member || '--' }}</span></span>
                        </div>
                        <div class="handle">
                            <el-button size="small" type="danger" plain @click="del">删除</el-button>
                        </div>
                    </div>
                    <div class="step">
                        <el-steps :active="Number(info.status)" simple>
                            <el-step title="匹配方案" @click.native="stepHandle('0')" />
                            <el-step title="强调优势" @click.native="stepHandle('1')" />
                            <el-step title="签订合同" @click.native="stepHandle('2')" />
                            <el-step title="进行审批" @click.native="stepHandle('3')" />
                            <el-step title="银行放款" @click.native="stepHandle('4')" />
                            <el-step title="回款" @click.native="stepHandle('5')" />
                            <el-step title="赢单" @click.native="stepHandle('6')" />
                            <el-step title="输单" @click.native="stepHandle('7')" />
                        </el-steps>
                    </div>
                </div>
                <div class="content">
                    <el-row v-loading="loading" :gutter="10">
                        <el-col :span="14">
                            <div class="card">
                                <el-tabs v-model="leftActive" @tab-click="handleLeftClick">
                                    <el-tab-pane label="商机信息" name="1">
                                        <div class="description">
                                            <div class="title">基础信息</div>
                                            <div class="desc-box">
                                                <el-row>
                                                    <el-col :span="12">
                                                        <div class="item">
                                                            <div class="label">商机名称</div>
                                                            <div class="value">
                                                                <detail-item-edit type="text" :value="info.name" @change="(response) =>{return infoUpdate(response, 'name')}" />
                                                            </div>
                                                        </div>
                                                    </el-col>
                                                    <el-col :span="12">
                                                        <div class="item">
                                                            <div class="label">客户名称</div>
                                                            <div class="value">{{ info.user_name }}</div>
                                                        </div>
                                                    </el-col>
                                                    <el-col :span="12">
                                                        <div class="item">
                                                            <div class="label">预估放款金额(万)</div>
                                                            <div class="value">
                                                                <detail-item-edit type="text" :value="info.loan" @change="(response) =>{return infoUpdate(response, 'loan')}" />
                                                            </div>
                                                        </div>
                                                    </el-col>
                                                    <el-col :span="12">
                                                        <div class="item">
                                                            <div class="label">预估回佣金额</div>
                                                            <div class="value">
                                                                <detail-item-edit type="text" :value="info.commission" @change="(response) =>{return infoUpdate(response, 'commission')}" />
                                                            </div>
                                                        </div>
                                                    </el-col>
                                                    <el-col :span="12">
                                                        <div class="item">
                                                            <div class="label">预计签单日期</div>
                                                            <div class="value">{{ info.times }}</div>
                                                        </div>
                                                    </el-col>
                                                    <el-col :span="12">
                                                        <div class="item">
                                                            <div class="label">跟进人</div>
                                                            <div class="value">{{ info.member }}</div>
                                                        </div>
                                                    </el-col>
                                                    <el-col :span="24">
                                                        <div class="item">
                                                            <div class="label">备注</div>
                                                            <div class="value">
                                                                <detail-item-edit type="text" :value="info.msg" @change="(response) =>{return infoUpdate(response, 'msg')}" />
                                                            </div>
                                                        </div>
                                                    </el-col>
                                                </el-row>
                                            </div>
                                        </div>
                                    </el-tab-pane>
                                    <el-tab-pane label="待办" name="3">
                                        <div style="margin-bottom: 10px;">
                                            <el-button type="primary" size="mini" @click="addDaiban">新建待办</el-button>
                                        </div>
                                        <div v-if="dbList.length > 0">
                                            <el-table ref="table" :data="dbList" border stripe highlight-current-row>
                                                <el-table-column prop="notice" label="信息" />
                                                <el-table-column prop="start_time" label="开始时间" />
                                                <el-table-column prop="end_time" label="结束时间" />
                                                <el-table-column prop="remind_time" label="提醒时间" />
                                                <el-table-column prop="member" label="跟进人" />
                                            </el-table>
                                        </div>
                                        <el-empty v-else />
                                    </el-tab-pane>
                                    <el-tab-pane label="回款" name="6">
                                        <div style="margin-bottom: 10px;">
                                            <el-button type="primary" size="mini" @click="addOrder">新建回款</el-button>
                                        </div>
                                        <div v-if="orderList.length > 0">
                                            <el-table ref="table" :data="orderList" border stripe highlight-current-row>
                                                <el-table-column prop="order_no" label="订单号" />
                                                <el-table-column prop="user_name" label="客户名称" />
                                                <el-table-column prop="business_name" label="商机名称" />
                                                <el-table-column prop="loan" label="放款金额">
                                                    <template #default="scope">
                                                        <span>{{ scope.row.loan + '万元' }}</span>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column prop="commission" label="佣金" />
                                                <el-table-column prop="status" label="状态">
                                                    <template #default="scope">
                                                        <span>{{ scope.row.status | orderStatusFilter }}</span>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column prop="msg" label="备注" />
                                            </el-table>
                                        </div>
                                        <el-empty v-else />
                                    </el-tab-pane>
                                </el-tabs>
                            </div>
                        </el-col>
                        <el-col :span="10">
                            <div class="card">
                                <el-tabs v-model="rightActive" @tab-click="handleRightClick">
                                    <el-tab-pane label="跟进" name="1">
                                        <div class="follow-box">
                                            <div class="follow-add">
                                                <follow-add :id="id" :edit="editFollowItem" @success="getFollowList" @cancel="editFollowCancel" />
                                            </div>
                                            <div v-if="followList.length > 0" class="follow">
                                                <el-timeline>
                                                    <el-timeline-item
                                                        v-for="(item, index) in followList"
                                                        :key="index"
                                                    >
                                                        <div class="follw-list">
                                                            <div class="top">
                                                                <span>{{ item.member }} {{ item.created }}</span>
                                                                <span class="handle">
                                                                    <i class="el-icon-edit" @click="editFollow(item)" />
                                                                </span>
                                                            </div>
                                                            <div class="bottom">
                                                                {{ item.notice }}
                                                                <div v-if="item.img || item.file" class="file-list">
                                                                    <div v-for="(item1, index1) in (item.img?item.img.split(','):[])" :key="index1" class="img">
                                                                        <el-image style="width: 30px; height: 30px; border-radius: 4px;" :src="item1" :preview-src-list="[item1]" />
                                                                    </div>
                                                                    <div v-for="(item1, index1) in (item.file?item.file.split(','):[])" :key="index1" class="file" title="点击下载">
                                                                        <a :href="item1" target="_blank"><img src="~@/assets/images/file.png" />文件</a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </el-timeline-item>
                                                </el-timeline>
                                            </div>
                                            <el-empty v-else />
                                        </div>
                                    </el-tab-pane>
                                    <el-tab-pane label="日志" name="3">
                                        <div v-if="userLogList.length>0" style="margin-top: 20px;">
                                            <el-timeline>
                                                <el-timeline-item
                                                    v-for="(item, index) in userLogList"
                                                    :key="index"
                                                    :timestamp="item.created | date"
                                                >
                                                    {{ item.notice }}
                                                </el-timeline-item>
                                            </el-timeline>
                                        </div>
                                        <el-empty v-else />
                                    </el-tab-pane>
                                </el-tabs>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </el-drawer>
        <!-- 新建待办 -->
        <daiban-dialog ref="daibanAdd" @success="getDaiban" />
        <!-- 新建订单 -->
        <order-dialog ref="orderAdd" @success="getOrder" />
    </div>
</template>
<script>
import { infos, createBusiness, somethingLog, followList, userLog, changeStatus, delBusiness } from '@/api/business'
import { order } from '@/api/kehu'
import DetailItemEdit from '@/components/DetailItemEdit'
import DaibanDialog from './DaibanDialog'
import OrderDialog from './../../order/components/AddDialog'
import FollowAdd from './FollowAdd'
export default {
    components: {
        DetailItemEdit,
        DaibanDialog,
        OrderDialog,
        FollowAdd
    },
    filters: {
        
        TagDialogtypeFilter(val) {
            const map = {
                1: '来访',
                2: '拜会',
                3: '到会'
            }
            return map[val]
        },
        statusFilter(val) {
            const map = {
                0: '删除',
                1: '待上门',
                2: '已上门',
                3: '改约',
                4: '爽约',
                5: '业务取消',
                6: '其他'
            }
            return map[val]
        },
        remindFilter(val) {
            const map = {
                1: '不提醒',
                2: '到时提醒',
                3: '提前5分钟',
                4: '提前15分钟',
                5: '提前30分钟',
                6: '提前1小时',
                7: '提前2小时',
                8: '提前1天'
            }
            return map[val]
        },
        businessStatusFilter(val) {
            const map = {
                0: '匹配方案',
                1: '强调优势',
                2: '签订合同',
                3: '进行审批',
                4: '银行放款',
                5: '回款',
                6: '赢单',
                7: '输单'
            }
            return map[val]
        },
        orderStatusFilter(val) {
            const map = {
                1: '进行中',
                2: '已完成'
            }
            return map[val]
        }
    },
    data() {
        return {
            loading: false,
            dialogVisible: false,
            leftActive: '1',
            rightActive: '1',
            id: '',
            detailFilter: {},
            info: {},
            adInfo: [],
            dbList: [],
            reservationList: [],
            businessList: [],
            orderList: [],
            followList: [],
            phoneList: [],
            userLogList: [],
            editFollowItem: {}
        }
    },
    methods: {
        showDialog(row, filter) {
            if (row.id) {
                this.id = row.id;
                this.detailFilter = filter;
                this.detailFilter.id = row.id;
                this.info = {};
                this.loading = true;
                this.initData();
                this.dialogVisible = true;
            } else {
                this.$message.error('参数异常！');
            }
            
        },
        // prev
        prev() {
            if (this.info.prov_id) {
                this.id = this.info.prov_id;
                this.detailFilter.id = this.info.prov_id;
                this.initData();
            } else {
                this.$message.warning('无上一条数据！');
            }
            
        },
        // next
        next() {
            if (this.info.next_id) {
                this.id = this.info.next_id;
                this.detailFilter.id = this.info.next_id;
                this.initData(); 
            } else {
                this.$message.warning('无下一条数据！');
            }
        },
        // 初始化数据
        initData() {
            infos(this.detailFilter).then(res => {
                this.info = res.data;
                this.getOrder();
            })
            this.getDaiban();
            this.getFollowList();
            this.getUserLog();
            this.loading = false;
        },
        // 待办
        getDaiban() {
            somethingLog({id: this.id}).then(res => {
                this.dbList = res.data.list;
            })
        },
        // 订单
        getOrder() {
            order({id: this.info.user_id}).then(res => {
                this.orderList = res.data.list;
            })
        },
        addOrder() {
            this.$refs.orderAdd.showDialog({ 
                user_id: this.info.user_id,
                user_name: this.info.user_name,
                business_id: this.info.id,
                business_name: this.info.name
            }); 
        },
        addDaiban() {
            this.$refs.daibanAdd.showDialog(this.info); 
        },
        // 跟进
        getFollowList() {
            followList({id: this.id}).then(res => {
                this.followList = res.data.list;
            })
        },
        editFollow(item) {
            this.editFollowItem = item
        },
        editFollowCancel() {
            this.editFollowItem = {}
        },
        // 日志
        getUserLog() {
            userLog({id: this.id}).then(res => {
                this.userLogList = res.data.list;
            })
        },
        stepHandle(e) {
            changeStatus({id: this.id, status: e}).then(res => {
                if (res.status) {
                    this.$emit('success', res);
                    this.$message.success('操作成功！');
                }
            })
        },
        // 删除
        del() {
            this.$alert('确定该商机删除？', '提示', {
                confirmButtonText: '确定',
                showCancelButton: true,
                callback: action => {
                    if (action == 'confirm') {
                        const params = {
                            ids: this.id
                        }
                        delBusiness(params).then(res => {
                            if (res.status) {
                                this.$emit('success', res);
                                this.dialogVisible = false;
                                this.$message({ type: 'success', message: '操作成功！'});
                            }
                        })
                    }
                }
            });
        },
        // 编辑基础信息
        infoUpdate(res, name, label) {
            console.log(res, name, label);
            this.$set(this.info, name, res.value);
            this.$set(this.info, label, res.label);
            createBusiness(this.info).then(res => {
                if (res.status == '1') {
                    this.$message.success('修改成功！')
                } else {
                    this.$message.error(res.message)
                }
            })
        },
        handleLeftClick(e) {
            console.log(e);
        },
        handleRightClick(e) {
            console.log(e);
        }
    }
}
</script>
<style lang="scss" scoped>
::v-deep .el-drawer__body {
    background: transparent;
    overflow: hidden;
    position: relative;
    padding-left: 40px;
    padding-top: 70px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}
::v-deep .el-drawer {
    background: transparent;
    box-shadow: none;
}
.drawer-box {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: rgb(242, 245, 251);
    border-radius: 4px 0 0 4px;
    .handle-btn {
        width: 40px;
        // height: 120px;
        padding: 15px 0;
        background: #fff;
        position: absolute;
        top: 110px;
        left: 0;
        border-radius: 4px 0 0 4px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        i {
            height: 30px;
            line-height: 30px;
            &:hover {
                color: #409eff;
            }
        }
    }
}
.top-header {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    font-size: 17px;
    color: #666;
    background: #fff;
    .title {
        width: 100%;
        display: flex;
        justify-content: space-between;
        .name {
            font-weight: 600;
            color: #333;
            font-size: 32px;
            margin-right: 30px;
        }
        .member {
            margin-right: 20px;
            color: #999;
            span {
                color: #333;
            }
        }
    }
    .tags {
        margin-top: 10px;
        .item {
            margin-right: 10px;
        }
    }
}
.content {
    flex: 1;
    height: calc(100% - 120px);
    padding: 10px;
    box-sizing: border-box;
    .el-row {
        height: 100%;
        .el-col {
            height: 100%;
            .card {
                height: 100%;
                background: #fff;
                padding: 5px 15px 10px;
                box-sizing: border-box;
                .el-tabs {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    ::v-deep .el-tabs__content {
                        flex: 1;
                        height: 100%;
                        .el-tab-pane {
                            height: 100%;
                            overflow-y: auto;
                        }
                    }
                    .follow-box {
                        height: 100%;
                        // background-color: red;
                        display: flex;
                        flex-direction: column;
                        .follow {
                            flex: 1;
                            margin-top: 20px;
                            height: 100%;
                            overflow: auto;
                        }
                    }
                }
            }
        }
    }
}
.description {
    width: 100%;
    .title {
        font-size: 14px;
        margin: 20px 0 10px;
    }
    .desc-box {
        // display: flex;
        border-top: 1px solid rgba(231, 232, 236, 0.7);
        border-left: 1px solid rgba(231, 232, 236, 0.7);
        // border-collapse: collapse;
        .item {
            font-size: 12px;
            display: flex;
            line-height: 40px;
            .label {
                color: #6c738a;
                background: rgba(247, 248, 250, 0.5);
                border-bottom: 1px solid rgba(231, 232, 236, 0.7);
                border-right: 1px solid rgba(231, 232, 236, 0.7);
                padding: 0 10px;
                min-width: 120px;
            }
            .value {
                display: flex;
                flex: 1;
                align-items: center;
                line-height: 20px;
                padding: 0 10px;
                border-bottom: 1px solid rgba(231, 232, 236, 0.7);
                border-right: 1px solid rgba(231, 232, 236, 0.7);
            }
        }
    }
}
.phone-box {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    background: rgba(247, 248, 250, 0.5);
    .top {
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        .date {
            color: #999;
        }
    }
    .bottom {
        margin-top: 10px;
    }
}
.follw-list {
    font-size: 12px;
    padding: 10px 10px 0 0;
    .top {
        color: #999;
        display: flex;
        justify-content: space-between;
        .handle {
            cursor: pointer;
        }
    }
    .bottom {
        background: #f7f7f9;
        padding: 10px;
        box-sizing: border-box;
        border-radius: 4px;
        margin-top: 10px;
        word-break: break-all;
        .file-list {
            width: 100%;
            padding: 10px 0 0;
            box-sizing: border-box;
            display: flex;
            flex-wrap: wrap;
            .img {
                width: 30px;
                height: 30px;
                border-radius: 4px;
                object-fit: cover;
                cursor: pointer;
                position: relative;
                margin-right: 20px;
                margin-top: 10px;
                .del {
                    width: 14px;
                    height: 14px;
                    border-radius: 50%;
                    background: rgba($color: #000, $alpha: 0.5);
                    color: #fff;
                    text-align: center;
                    line-height: 11px;
                    transform: rotate(45deg);
                    position: absolute;
                    top: -4px;
                    right: -4px;
                }
                img {
                    width: 30px;
                    height: 30px;
                    border-radius: 4px;
                }
            }
            .file {
                height: 30px;
                padding: 5px 10px;
                box-sizing: border-box;
                border-radius: 4px;
                background: #f7f7f9;
                cursor: pointer;
                position: relative;
                margin-right: 20px;
                margin-top: 10px;
                img {
                    width: 20px;
                    height: 20px;
                    border-radius: 0;
                    margin-right: 5px;
                    float: left;
                }
            }
        }
    }
}
</style>